<template>
  <div id="task">
        <div id="superTask">超级达人</div>
        <!--tab-->
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">找达人</mt-tab-item>
            <mt-tab-item id="2">找服务</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <!--搜索框-->
                <div class="searchBar">
                    <p><img src="../assets/task/select.png" alt=""></p>
                    <input @keyup.enter="searchServerPeople" v-model="forms.shopName" prefix-icon="el-icon-search" placeholder="请输入内容">
                    <p><img @click="forms.shopName = ''" src="../assets/task/delete.png" alt=""></p>
                </div>
                 <ul v-infinite-scroll="loadMore"
                     infinite-scroll-disabled="loading"
                     infinite-scroll-distance="0"
                     infinite-scroll-immediate-check="false">
                   <li id="taskInfo"  v-for="item in accreditedMess.list">
                     <div id="up">
                       <img class="userImg" :src="item.userModel.headPortrait" alt="">
                       <div class="info">
                         <div class="userTit">
                           {{item.shopName}}
                           <div class="star">
                                <img v-for="item in total" src="../assets/tabber/starHav.png" alt="">
                                <img v-for="item in untotal" src="../assets/tabber/unstarHav.png" alt="">
                           </div>
                         </div>
                         <div class="next" @click="inStore(item.id,'acc')">进店 ></div>
                         <div class="content">
                           {{item.shopExplain}}

                         </div>
                       </div>
                     </div>
                     <div id="down"style="">
                       <div style="color:#2ba196;">承诺服务时间</div>
                       <div style="color:#8a8989;">{{item.openDay1}} {{item.openDay2}} {{item.beginOpenTime}}-{{item.endOpenTime}}</div>
                     </div>
                   </li>
                 </ul>

            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <!--搜索框-->
                <div class="searchBar">
                    <p><img  src="../assets/task/select.png" alt=""></p>
                    <input @keyup.enter="searchServer" v-model="forms2.serverName" prefix-icon="el-icon-search" placeholder="请输入内容">
                    <p><img @click="forms2.serverName = ''" src="../assets/task/delete.png" alt=""></p>
                </div>
              <ul v-infinite-scroll="loadMore2"
                  infinite-scroll-disabled="loading2"
                  infinite-scroll-distance="0"
                  infinite-scroll-immediate-check="false"
                 >
                <li id="shop" v-for="item in serverMess.list">
                  <div class="shopTitle">
                    <img class="shopImg" src="../assets/task/shop.png" alt="">
                    <div class="shopName">
                      <div class="serverInfo" style="">
                        {{item.serverName}}
                        <div class="star">
                            <img v-for="item in star" src="../assets/tabber/starHav.png" alt="">
                            <img v-for="item in unstar" src="../assets/tabber/unstarHav.png" alt="">
                        </div>
                      </div>
                      <div class="next" @click="inStore(item.id,'server')">进店 ></div>
                    </div>
                  </div>
                  <div class="shopCon">
                    <div class="particulars">
                      <p v-if="item.topExplainJson.input1==undefined">
                        <img style="height:12.1rem;width:100%;" :src="item.topExplainJson.common1" alt="">
                      </p>
                      <p v-else-if="item.topExplainJson.common1==undefined">
                        {{item.topExplainJson.input1}}
                      </p>
                    </div>
                    <div style="margin:auto;width:30%;">
                      <div class="upper">
                        <p v-if="item.topExplainJson.input2==undefined">
                          <img style="height:100%;width:100%;" :src="item.topExplainJson.common2" alt="">
                        </p>
                        <p v-else="item.topExplainJson.common2==undefined">
                          {{item.topExplainJson.input2}}
                        </p>
                      </div>
                      <div class="lower" style="">
                        <p v-if="item.topExplainJson.input3==undefined">
                          <img style="height:100%;width:100%;" :src="item.topExplainJson.common3" alt="">
                        </p>
                        <p v-else="item.topExplainJson.common3==undefined">
                          {{item.topExplainJson.input3}}
                        </p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>



            </mt-tab-container-item>
        </mt-tab-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
        total:undefined,
        untotal:undefined,
        star:undefined,
        unstar:undefined,
        serverMess:{
            list: []
        },
        serverMess1:{
            list: []
        },
        accreditedMess:{},
        forms:{
            shopName:undefined,
            pageSize:10,
            pageNumber:1,
        },
        forms2:{
            serverName:undefined,
            pageSize:10,
            pageNumber:1,
        },
        selected:"1",
        input: '',
        loading: false,
        loading2: false
    }
  },
  created(){
      this.getaccreditedMess()
      this.getServerMessage()
  },
  methods:{
    //   达人查询
    searchServerPeople(){
        this.getaccreditedMess()
    },
    searchServer(){
        this.serverMess.list = []
        this.forms2.pageNumber = 1;
        this.forms2.pageSize = 10;
        this.getServerMessage()
    },
    inStore(id,val){
     if(val=='acc'){
         this.$router.push({path:'/userCheck/'+id})
     }
     if(val=='server'){
         this.$router.push({path:'/serComment/'+id})
     }
    },
    loadMore () {
      this.forms.pageNumber++
        this.getaccreditedMess()
    },
    loadMore2 () {
      this.forms2.pageNumber++
      this.getServerMessage()
    },
    //   获取达人信息
    getaccreditedMess(){
       this.$api.getaccreditedMess(this.forms).then((res)=>{
              if(res.code == '000000'){
                  console.log(res.data)
                if (res.data.totalPage === this.forms.pageNumber) {
                  this.loading = true
                  this.$toast({
                    message: '已经没有更多数据了',
                    position: 'bottom'
                  })
                }
                  this.accreditedMess = res.data
                  this.accreditedMess.list.forEach((item)=>{
                       this.total=item.userModel.totalStar
                       this.untotal = 5-Number(this.total)
                  })
              }
          })
    },
    //   获取服务信息
    getServerMessage(){
       this.$api.getServerMessage(this.forms2).then((res)=>{
              if(res.code == '000000'){
                   console.log('HHHHHHHHHHHh')
                   console.log(res.data)
                if (res.data.totalPage === this.forms2.pageNumber) {
                  this.loading2 = true
                  this.$toast({
                    message: '已经没有更多数据了',
                    position: 'bottom'
                  })
                }

                res.data.list.forEach((item)=>{
                      item.topExplainJson = JSON.parse(item.topExplainJson)
                      this.serverMess.list.push(item)
                    //   this.star
                  })
                  console.log('this.serverMess')
                  console.log(this.serverMess)
              }
          })
    },
    // 获取服务信息
    taskSel(e){
        e.target.src=""
    },
    serverSel(e){

    }
  }
}
</script>
<style>
#task .icon[data-v-59a74259]{
    margin:0 0.1rem!important;
}
#task .mint-tab-container-item{
    height:100%;
    overflow:scroll;
}
#task .mint-navbar .mint-tab-item.is-selected{
    border-bottom: 0px solid #26a2ff;
    color: #26a2ff;
}
#task .mint-tab-item.is-selected .mint-tab-item-label{
    color:#2AA094;
    border-bottom: 2px solid #26a2ff;
}
#task .mint-tab-item:nth-child(1).is-selected .mint-tab-item-label::before{
    content:url(../assets/task/task.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#task .mint-tab-item:nth-child(2).is-selected .mint-tab-item-label::before{
    content:url(../assets/task/service.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#task .mint-tab-item-label{
    height:4vh;
    line-height:4vh;
    font-size:1rem;
    width:20vw;
}
#task .mint-tab-item:nth-child(1) .mint-tab-item-label::before{
    content:url(../assets/task/untask.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#task .mint-tab-item:nth-child(2) .mint-tab-item-label::before{
    content:url(../assets/task/unservice.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#task .mt-navbar{
    height:2rem;
    line-height:2rem;
    letter-spacing:0.05rem;
}
#task .mint-tab-item-label img{
    height:1.2rem;
    width:1.2rem;
    margin-right:0.3rem;
    margin-top:-0.3rem;
}
#task .searchBar{
    width:93.33%;
    border-radius:4px;
    margin:0.3rem auto;
    background:#FFF;
    display:flex;
}
#task .searchBar > p{
    margin:auto 0.5rem;
}
#task .searchBar > p >img{
    height:0.9rem;
}
#task .searchBar > input{
    width:100%;
    font-size:0.8rem;
    height:2.2rem;
    line-height:2.2rem;
    background:rgba(225,225,225,0)
}
#task #superTask{
    width:100%;
    height:6vh;
    background:#f8f8f8;
    font-size:1.2rem;
    text-align:center;
    line-height:6vh;
    letter-spacing:0.3rem;
}
#task .mint-tab-container-wrap{
    display:block;
}
#task #taskInfo{
    width:100%;
    padding:1rem 1.4rem;
    background-size:100% 100%;
    background-image:url(../assets/task/1.png);
}
#task #up{
    height:5em;
    width:100%;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #d8d8d8;
}
#task #up .userImg{
    width:2.8rem;
    height:2.8rem;
    border-radius:50%;
    margin:0.25rem;
}
#task #up .info{
    height:1.8rem;
    width:100%;
    letter-spacing:0.05rem;
}
#task #up .info .userTit{
    float:left;
    font-size:0.8rem;
    color:#299f94;
    width:70%;
}
#task #up .info .userTit .star{
    width:40%;
    display:flex;
    justify-content:space-between;
}
#task #up .info .userTit .star > img{
    height:0.8rem;
    width:0.8rem;
}
#task #up .star>img{
    width:0.6rem;
    height:0.6rem;
}
#task #up .next{
    float:right;
    width:3rem;
    margin-right:0.75rem;
    text-align:center;
    line-height:1.5rem;
    height:1.5rem;
    background:#c4e1c6;
    border-radius:7px;
    font-size:0.7rem;
    color:#ffffff;
}
#task #up .content{
    clear:both;
    padding:0.3rem 0px;
    font-size:0.6rem;
    color:#000000;
}
#task #down{
    clear:both;
    display:flex;
    justify-content:space-between;
    font-size:0.5rem;
    margin:0.4rem;
    letter-spacing:0.05rem;
}
#task #shop{
    padding:0.5rem;
    box-shadow:2px 2px 10px 2px #e2e2e2;
    width:93.3%;
    margin:10px auto;
    border-radius:7px;
    background:#fff;
}
#task #shop .shopTitle{
    display:flex;
    margin-top:0.5rem;
    font-size:0.9rem;
}
#task #shop .shopImg{
    width:2rem;
    height:2rem;
    margin:auto 0.5rem;
}
#task #shop .shopName{
    width:95%;
    display:flex;
    justify-content:space-between;
}
#task #shop .shopName .serverInfo{
    font-size:0.8rem;
    color:#8b8b8b;
    width:70%;
}
#task #shop .shopName .serverInfo .star{
    display:flex;
    justify-content:space-between;
}
#task #shop .shopName .serverInfo .star>img{
    width:0.8rem;
    height:0.8rem;
}
#task #shop .next{
    width:3.5rem;
    margin-right:0.75rem;
    text-align:center;
    line-height:1.5rem;
    height:1.5rem;
    background:#c4e1c6;
    border-radius:7px;
    font-size:0.7rem;
    color:#ffffff;
}
#task #shop .shopCon{
    display:flex;
    width:93%;
    font-size:0.9rem;
    margin:1rem auto 0;
}
#task #shop .particulars{
    height:13rem;
    width:70%;
    border-radius:7px;
    border:7px solid #29a193;
}
#task #shop .upper{
    height:6.5rem;
    border-radius:7px;
    border:7px solid #c4e1c6;
}
#task #shop .upper > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#task #shop .lower{
    height:6.5rem;
    border-radius:7px;
    border:7px solid #69b373;
}
#task #shop .lower > p{
    height:100%;
    width:100%;
    word-break:break-all;
}
#task .mint-tab-container {
  overflow: hidden;
  position: absolute;
  top: 13vh;
  left: 0;
  right: 0;
  bottom: 48px;
}
  #task .mint-tab-container-wrap{
    height: 100%;
  }
</style>
